<template>

  <z-space vertical>
    <z-table :columns="columns" height="auto" :selectable="selectable"
             :sequence="sequence"
             :data="data" :pagination="false" ></z-table>

    <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>
  </z-space>

</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";

export default {
  components: {VueCodeMirror},
  data() {
    return {
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          scopedSlots: {
            header:(h, scope) => {
              return (<div><i class="el-icon-share"></i> {scope.column.label}</div>)
            }
          }
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ],
      data: [
        {
          name: '子君',
          sex: 1,
          age: 18
        }
      ],
      // 是否显示多选框
      selectable: false,
      // 是否显示序号列
      sequence: true
    }
  },
  setup() {
    let def = {
      tpl: `<template>
  <z-table :columns="columns" height="auto" :selectable="selectable"
           :sequence="sequence"
           :data="data" :pagination="false" ></z-table>
</template>
    `,
    js: `  data() {
    return {
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex',
          // 格式化表格,与element-ui 的表格属性相同
          scopedSlots: {
            header:(h, scope) => {
              return (<div><i class="el-icon-share"></i> {scope.column.label}</div>)
            }
          }
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ],
      data: [
        {
          name: '子君',
          sex: 1,
          age: 18
        }
      ],
      // 是否显示多选框
      selectable: false,
      // 是否显示序号列
      sequence: true
    }
  },
`
    }

    return {
    def
    }
  }
}
</script>
